<template>
  <el-tabs tab-position="left" :style="{ height: mainH + 'px' }"  @tab-click="tab_click">
    <el-tab-pane label="仓库管理">
      <el-row>
        <el-col :span="10">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>应用仓库配置</span>
                <el-button type="primary" @click="post_sys_other_privilege(app_repository_form)"
                  size="mini">保存</el-button>
              </div>
            </template>
            <el-form ref="form" :model="app_repository_form" size="mini" label-width="80px">
              <el-form-item label="url">
                <el-input v-model="app_repository_form.sys_other_privilege_url" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model="app_repository_form.sys_other_privilege_user" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="app_repository_form.sys_other_privilege_pass" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="库类型">
                <SysCodeInput sys_code_type="package_repository_type" @childClick="package_repositor_CodeClick"
                  :sys_code_value="app_repository_form.sys_other_privilege_code" />
              </el-form-item>
              <el-form-item label="启用">
                <el-switch v-model="app_repository_form.sys_other_privilege_on"></el-switch>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>镜像仓库配置</span>
                <el-button type="primary" @click="onSubmit" size="mini">保存</el-button>
              </div>
            </template>
            <el-form ref="form" :model="mirror_repository_form" size="mini" label-width="80px">
              <el-form-item label="url">
                <el-input v-model="mirror_repository_form.name" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model="mirror_repository_form.name" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="mirror_repository_form.name" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="库类型">
                <el-select v-model="mirror_repository_form.region" placeholder="请选择">
                  <el-option label="Harbor" value="shanghai"></el-option>
                  <el-option label="阿里云" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="启用">
                <el-switch v-model="mirror_repository_form.delivery"></el-switch>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="10">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>Git仓库配置</span>
                <el-button type="primary" @click="post_sys_other_privilege(git_repository_form)"
                  size="mini">保存</el-button>
              </div>
            </template>
            <el-form ref="form" :model="git_repository_form" size="mini" label-width="80px">
              <el-form-item label="仓库地址">
                <el-input v-model="git_repository_form.sys_other_privilege_url" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model="git_repository_form.sys_other_privilege_user" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="git_repository_form.sys_other_privilege_pass" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="库类型">
                <SysCodeInput sys_code_type="git_repository_type" @childClick="git_repositor_CodeClick"
                  :sys_code_value="git_repository_form.sys_other_privilege_code" />
              </el-form-item>
              <el-form-item label="启用">
                <el-switch v-model="git_repository_form.sys_other_privilege_on"></el-switch>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-tab-pane>
    <Container></Container>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import SysCodeInput from "@/components/communal/sys_code_input.vue";
import * as Request from "@/general/request";
import { ElMessage } from "element-plus";
import { onMounted } from "vue";
import Container from "@/components/project_setting/container.vue";

let app_repository_form: any = ref({
  sys_other_privilege_flag: "app",
});
const git_repository_form: any = ref({
  sys_other_privilege_flag: "git",
});
let mirror_repository_form: any = ref({});
const clientH:any = document.documentElement.clientHeight;
let mainH = clientH.value - 300;


const tab_click = (e: any) => {
      debugger
      if (e.name === "container_configuration") {

      }
    };

const get_sys_other_privilege = async (from_:any, privilege_code:string) => {
  const response = await Request.GET(
    "/background/home/resource_management/sys_other_privilege_m",
    { sys_other_privilege_flag: privilege_code }
  );
  if (response && response.data) {
    var return_data = response.data;
    if (return_data.success) {
      from_.value = return_data.data;
      ElMessage.success(return_data.msg);
    } else {
      ElMessage.error(return_data.msg);
    }
  }
};

const post_sys_other_privilege = async (from_: any) => {
  const response = await Request.POST(
    "/background/home/resource_management/sys_other_privilege_m",
    from_
  );
  if (response && response.data) {
    var return_data = response.data;
    if (return_data.success) {
      ElMessage.success(return_data.msg);
    } else {
      ElMessage.error(return_data.msg);
    }
  }
};

const package_repositor_CodeClick = async (e: string) => {
  app_repository_form.value.sys_other_privilege_code = e;
};

const git_repositor_CodeClick = async (e :string) => {
  git_repository_form.value.sys_other_privilege_code = e;
};

const get_sys_other_privilege_app = async () => {
  get_sys_other_privilege(app_repository_form, "app");
};

const get_sys_other_privilege_git = async () => {
  get_sys_other_privilege(git_repository_form, "git");
};

onMounted(get_sys_other_privilege_app);
onMounted(get_sys_other_privilege_git);

</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>
